
<template>
  <div>
    <p-modal
      :title="title"
      width = '80%'
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="closeModal"
    >

    <p-form-model
        class="skill-form"
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
         <p-row :gutter="24">
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillCode" label="技能代码" prop="skillCode">
                <p-input
                  v-model="form.skillCode"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillName" label="技能名称" prop="skillName">
                <p-input
                  v-model="form.skillName"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillProperty" label="技能属性" prop="skillProperty">

                <p-select v-model="form.skillProperty">
                  <p-select-option v-for="(item, key) in skillPropertyKeys" :key="key" :value="key">
                    {{item}}
                  </p-select-option>
                </p-select>

              </p-form-model-item>
            </p-col>

            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillType" label="技能分类" prop="skillType">

                <p-select v-model="form.skillType">
                  <p-select-option v-for="(item, key) in skillTypeKeys" :key="key" :value="key">
                    {{item}}
                  </p-select-option>
                </p-select>

              </p-form-model-item>
            </p-col>


            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="beforeReviewTimes" label="复核到期提前时间（天)" prop="beforeReviewTimes">
                <p-input
                  v-model="form.beforeReviewTimes"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillIndate" label="技能有效期  (天)" prop="skillIndate">
                <p-input
                  v-model="form.skillIndate"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="lineleaderConfirm" label="线长确认" prop="lineleaderConfirm">

                <p-checkbox
                  v-model="form.lineleaderConfirm"
                ></p-checkbox>

              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="traineeTime" label="见习时长" prop="traineeTime">
                <p-input
                  v-model="form.traineeTime"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="generalPassingScore" label="通识合格分数(包含)" prop="generalPassingScore">
                <p-input
                  v-model="form.generalPassingScore"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="skillPassingScore" label="技能合格分数(包含)" prop="skillPassingScore">
                <p-input
                  v-model="form.skillPassingScore"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="lineleaderPassingScore" label="线长确认合格分数(包含)" prop="lineleaderPassingScore">
                <p-input
                  v-model="form.lineleaderPassingScore"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="traineePassingScore" label="见习合格分数(包含)" prop="traineePassingScore">
                <p-input
                  v-model="form.traineePassingScore"
                />
              </p-form-model-item>
            </p-col>
            <p-col :xl="8" :lg="12" :md="12" :sm="24">
              <p-form-model-item ref="reviewPassingScore" label="复核合格分数(包含)" prop="reviewPassingScore">
                <p-input
                  v-model="form.reviewPassingScore"
                />
              </p-form-model-item>
            </p-col>
         </p-row>
      
      </p-form-model>    

    </p-modal>
  </div>
</template>
<script>
import { getDictItemsArr } from "@/utils/util";
import { postAction, getAction, deleteAction, putAction } from "@/api/manage";

export default {
  data() {
    return {
      state: 'add',
      visible: false,
      confirmLoading: false,
      labelCol: { span: 12},
      wrapperCol: { span: 12 },
      other: '',
      skillPropertyKeys: {},
      // 技能分类数字字典
      skillTypeKeys: {},        
      editId: '',
      form: {
        skillCode: '',
        skillName:'',
        skillProperty:'',
        skillType:'',
        beforeReviewTimes: '',
        skillIndate: '',
        lineleaderConfirm: false,
        traineeTime: '', 
        generalPassingScore: '',
        skillPassingScore: '',
        lineleaderPassingScore: '',
        traineePassingScore: '',
        reviewPassingScore: '',
      },
      rules: {
        skillCode: [{ required: true, message: '请输入技能代码', trigger: 'blur' }],
        skillName: [{ required: true, message: '请输入技能名称', trigger: 'blur' }],
        skillProperty: [{ required: true, message: '请选择技能属性', trigger: 'blur' }],
        skillType: [{ required: true, message: '请选择技能分类', trigger: 'blur' }],
        beforeReviewTimes: [{ required: true, message: '请输入复核到期提前时间', trigger: 'blur' }],
        skillIndate: [{ required: true, message: '请输入技能有效期', trigger: 'blur' }],
        lineleaderConfirm: [{ required: true, message: '线长确认', trigger: 'blur' }],
        traineeTime: [{ required: true, message: '请输入见习时长', trigger: 'blur' }],
        generalPassingScore: [{ required: true, message: '请输入通识合格分数', trigger: 'blur' }],
        skillPassingScore: [{ required: true, message: '请输入技能合格分数', trigger: 'blur' }],
        lineleaderPassingScore: [{ required: true, message: '请输入线长确认合格分数', trigger: 'blur' }],
        traineePassingScore: [{ required: true, message: '请输入见习合格分数', trigger: 'blur' }],
        reviewPassingScore: [{ required: true, message: '请输入复核合格分数', trigger: 'blur' }],
      },  
      url: {
        add: '/mes-manpower/mesHrSkillBank',
        edit: '/mes-manpower/mesHrSkillBank'
      }    
    };
  },

  computed: {
    title(){
      return this.state == 'add' ? '新增' : '编辑'
    }
  },

  mounted() {
    this.getAjaxGetDictItems()
  },
  methods: {

    // 获取数字字典
    getAjaxGetDictItems() {
      const arr = [
        { code: "	mes_skill_property", key: "skillPropertyKeys" },
        { code: "mes_skill_type", key: "skillTypeKeys" },

      ];
      getDictItemsArr(this, arr);
    },

    showModal(record) {
      if(record) {
        this.state = 'edit'
        console.log(record);
        for (let key in this.form) {
          this.form[key] = record[key]
        }
        this.form.skillProperty = `${this.form.skillProperty}`

        this.form.lineleaderConfirm = {0: false, 1: true}[this.form.lineleaderConfirm]

        this.editId = record.id
      } else {
        this.state = 'add'
      }
      this.visible = true;
    },

    handleOk(e) {
      this.confirmLoading = true;
      const params = JSON.parse(JSON.stringify(this.form))
      params.lineleaderConfirm = params.lineleaderConfirm ? "1" : "0" 

      if( this.state == 'add'  ) {
        params.status = '1'
        postAction(this.url.add, params).then( res => {
          if( res.success) {
            this.$emit('handleSuccess')   
            this.closeModal()     
          }else{
            this.$message.error(res.msg)  
          }
          this.confirmLoading = false;  
        } )
      }

      if( this.state == 'edit' ) {
        params.id = this.editId
        putAction(this.url.edit, params).then( res => {
          if( res.success) {
            this.$emit('handleSuccess')   
            this.closeModal()     
          }else{
            this.$message.error(res.msg)  
          }
          this.confirmLoading = false;  
        } )        
      }
    },

    closeModal(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.$refs.ruleForm.resetFields()
    },
  },
};
</script>


<style lang="less">
  .skill-form.poros-form .poros-form-item {
    margin-bottom: 5px;
    min-height: 55px; 
  }
</style>
